<template>
  <div>
    <global-component/>
  </div>
  <div class="task-list">
    <h1>Task List</h1>
    <div class="input-group">
      <input v-model="newTask" placeholder="Add a task" @keyup.enter="addTask" class="task-input"/>
      <button @click="addTask" class="add-btn">Add</button>
    </div>
    <div class="filter-group">
      <div class="filter-item">
        <label>
          <input type="radio" value="personal" v-model="taskType" /> Personal
        </label>
        <label>
          <input type="radio" value="work" v-model="taskType" /> Work
        </label>
      </div>
      <div class="filter-item">
        <label>
          <input type="checkbox" v-model="urgent" /> Urgent
        </label>
      </div>
      <div class="filter-item">
        <select v-model="priority" class="priority-select">
          <option>Low</option>
          <option>Medium</option>
          <option>High</option>
        </select>
      </div>
    </div>
    <transition-group name="list" tag="ul" class="task-items">
      <li v-for="(task, index) in filteredTasks" :key="task.id" class="task-item">
        <TaskItem :task="task" @remove="removeTask(index)" >
          <!--    具名插槽      -->
          <template v-slot:priority>
            优先级：{{task.priority}}
          </template>
          <template v-slot:type>
            类型：{{task.type}}
          </template>
          <!--   作用域插槽       -->
          <template  v-slot="tipsSlot">
            <span  class="helper-text">{{tipsSlot.tips}}</span>
          </template>
        </TaskItem>
      </li>
    </transition-group>
    <p v-if="newTaskError" class="error">{{ newTaskError }}</p>
    <button @click="sortTasks" class="sort-btn">Sort Tasks</button>
  </div>
  <div>
    <LocalComponent/>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue';
import TaskItem from '../components/TaskItem.vue';
import LocalComponent from "@/components/LocalComponent.vue";

export default {
  name: 'TaskList',
  components: {LocalComponent, TaskItem },
  setup() {
    const newTask = ref('');
    const tasks = reactive([
      {id: 1, text: 'Learn Vue.js', type: 'work', priority: 'High', urgent: false},
      {id: 2, text: 'Build a Task Manager App', type: 'personal', priority: 'Medium', urgent: true},
    ]);

    const newTaskError = ref('');
    const taskType = ref('personal');
    const urgent = ref(false);
    const priority = ref('Low');

    //在控制台输出“watch the prop:属性名称”；
    watch(newTask, (newVal) => {
      console.log('watch the prop: newTask', newVal);
    });

    // 计算属性get方法的使用
    const filteredTasks = computed(() => {
      return tasks.filter(task => task.text.includes(newTask.value));
    });

    const addTask = () => {
      if (newTask.value.trim() === '') {
        newTaskError.value = 'Task cannot be empty';
        return;
      }
      tasks.push({
        id: Date.now(),
        text: newTask.value,
        type: taskType.value,
        urgent: urgent.value,
        priority: priority.value
      });
      newTask.value = '';
      newTaskError.value = '';
    };

    const removeTask = (index) => {
      tasks.splice(index, 1);
    };

    const sortTasks = () => {
      tasks.sort((a, b) => a.text.localeCompare(b.text));
    };

    return {
      newTask,
      newTaskError,
      tasks,
      filteredTasks,
      addTask,
      removeTask,
      sortTasks,
      taskType,
      urgent,
      priority
    };
  },
};
</script>

<style scoped>
.task-list {
  width: 650px;
  margin: 0 auto;
  padding: 1em;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.5em;
  color: #333;
}
.helper-text{
  font-size: 13px;
  color: #a9a8a8;
}
.input-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}

.task-input {
  flex-grow: 1;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.add-btn {
  padding: 0.5em 1em;
  margin-left: 0.5em;
  background-color: #28a745;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.add-btn:hover {
  background-color: #218838;
}

.filter-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}

.filter-item {
  flex-grow: 1;
  text-align: center;
}

.priority-select {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.task-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em;
  margin-bottom: 0.5em;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 4px;
}

.urgent {
  color: red;
  font-weight: bold;
}

.error {
  color: red;
  text-align: center;
  margin-bottom: 1em;
}

.sort-btn {
  display: block;
  width: 100%;
  padding: 0.5em;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  margin-top: 1em;
}

.sort-btn:hover {
  background-color: #0056b3;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
